<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
      xmlns:http="http://www.springframework.org/schema/jdbc" xmlns:c="http://www.w3.org/1999/XSL/Transform">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Lei Shi">
    <meta http-equiv="Cache-Control" content="o-transform">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="csrf-token" content="1483780974##87f89328c5616669f00302a263fe9061bb852818">


    <link rel="stylesheet" href="/static/css/gs/index_login.css" th:href="@{/static/css/gs/index_login.css}">
    <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}" href="/static/css/gs/bootstrap.min.css">
    <link rel="stylesheet" th:href="@{/static/js/laypage/skin/laypage.css}" href="/static/js/gs/laypage/skin/laypage.css">



    <script type="text/javascript" src="/static/js/jquery-1.8.3.js" th:src="@{/static/js/jquery-1.8.3.js}"></script>
    <script src="/static/js/gs/jquery-latest.js" th:src="@{/static/js/gs/jquery-latest.js}"></script>
    <script th:src="@{/static/js/vue/vue.min.js}" src="/static/js/gs/vue/vue.min.js"></script>
    <script th:src="@{/static/js/jquery/jquery.min.js}" src="/static/js/gs/jquery/jquery.min.js"></script>
    <script th:src="@{/static/js/laypage/laypage.js}" src="/static/js/gs/laypage/laypage.js" charset="utf-8"></script>
    <script th:src="@{/static/js/layer/layer.js}" src="/static/js/gs/layer/layer.js" charset="utf-8"></script>
    <script th:src="@{/static/js/gs/layui-v2.5.5/layui/lay/modules/laydate.js}" src="/static/js/gs/layui-v2.5.5/layui/lay/modules/laydate.js"></script>
    <script th:src="@{/static/js/gs/zixie/jquery-1.10.2.min_65682a2.js}" src="/static/js/gs/zixie/jquery-1.10.2.min_65682a2.js"></script>
    <script src="/static/layui/layui.js" charset="utf-8" th:src="@{/static/layui/layui.js}"></script>
    <script src="/static/js/gs/zixie/index_login.js" th:src="@{/static/js/gs/zixie/index_login.js}"></script>

    <title>会员中心 - 南瓜课堂</title>
    <meta content="南瓜课堂课程分为基础课和项目课，内容涵盖了Linux、Python、Java、C语言、Ruby、Android、IOS开发、大数据、信息安全等IT技术领域。" name="description">
    <meta content="南瓜课堂课程,IT培训课程,IT实训课程,IT在线课程,all" name="keywords">

    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/css/monokai-sublime.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/katex.min.css">
    <link rel="stylesheet" href="/static/css/video-js.min.css">
    <link rel="stylesheet" href="/static/css/styles-2016121272249.css">
    <script type="text/javascript" th:src="@{/static/html5shiv.js}" ></script>
    <script type="text/javascript" th:src="@{/static/respond.min.js}" ></script>
    <script th:src="@{/static/js/vue/vue.min.js}"></script>
    <script th:src="@{/static/js/laypage/laypage.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/static/DD_belatedPNG_0.0.8a-min.js}" ></script>
    <script>DD_belatedPNG.fix('*');</script>
    <style>
        @font-face {
            font-family: "lantingxihei";
            src: url("/static/font/ltq/FZLTCXHJW.TTF");
        }

        /* modal 模态框*/
        #invite-user .modal-body {
            overflow: hidden;
        }
        #invite-user .modal-body .form-label {
            margin-bottom: 16px;
            font-size:14px;
        }
        #invite-user .modal-body .form-invite {
            width: 80%;
            padding: 6px 12px;
            background-color: #eeeeee;
            border: 1px solid #cccccc;
            border-radius: 5px;
            float: left;
            margin-right: 10px;
        }
        #invite-user .modal-body .msg-modal-style {
            background-color: #7dd383;
            margin-top: 10px;
            padding: 6px 0;
            text-align: center;
            width: 100%;
        }
        #invite-user .modal-body .modal-flash {
            position: absolute;
            top: 53px;
            right: 74px;
            z-index: 999;
        }

    </style>


</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top header">
    <div class="container">

        <div class="collapse navbar-collapse" id="header-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="dropdown active">
                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
                        课程
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="active" href="../index.html">全部课程</a></li>
                        <li><a class="" href="index-preview.html">即将上线</a></li>
                        <li><a class="" href="index1.html">开发者</a></li>
                    </ul>
                </li>

                <li class=" new-nav logo-1111">
                    <a href="/user/toIndex">首页</a>
                </li>

            </ul>


            <div class="navbar-right btns" id="shua">
               <!--                 登录注册，登录成功后显示name（高顺）-->
                    <span th:if="${session.user==null}">
		           <a class="h_log" href="#" onclick="button1()" id="login1">登录/注册</a>
	            </span>
                    <span th:if="${session.user!=null}">
		            <span style="font-size: 15px; color: burlywood">昵称：<span th:text="${session.user.userName}" style="color: white" 
                               id="hlog" onmousemove="onmousemove(this)" onmouseout="onmouseout(this)">
                    </span></span><br/>
                         <span th:if="${user.userVip==1}">

                        <span style="font-size: 15px; color: burlywood">会员到期：<span th:text="${#dates.format(user.userVipdue, 'yyyy-MM-dd')}" style="color: red"  id="hlogs" onmousemove="onmousemove(this)" onmouseout="onmouseout(this)"></span>
                        </span>
                        </span>

                    <span style="color: white" id="exit"><a href="/user/logout">退出</a></span>
	            </span>


            </div>

        </div>
    </div>
</nav>
<div class="vip-header layout-no-margin-top" style="min-height:215px;">
    <h1 class="vip-header-title">加入南瓜课堂会员，购买课程享优惠</h1>
</div>
<div class="container">
    <div class="row vip-row hidden-xs">
        <div class="vip-item">
            <ul class="list-group">
                <li class="list-group-item"><h4>&nbsp;</h4></li>
                <li class="list-group-item">免费课程</li>
                <li class="list-group-item">免费直播</li>
                <li class="list-group-item">会员课程</li>
                <li class="list-group-item">课程优惠</li>
                <li class="list-group-item">
                    <span style="border-bottom:1px dashed" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="在讨论区提问，可以收到专职助教答疑回复">会员课程答疑</span>
                </li>
                <li class="list-group-item" style="height:190px;">&nbsp;</li>
            </ul>
        </div>

        <div class="vip-item">
            <ul class="list-group">
                <li class="list-group-item"><h4 class="is-free-user">免费</h4></li>
                <li class="list-group-item"><img src="/static/picture/vip-service-status.jpg" alt=""></li>
                <li class="list-group-item"><img src="/static/picture/vip-service-status.jpg" alt=""></li>
                <li class="list-group-item">&nbsp;</li>
                <li class="list-group-item">&nbsp;</li>
                <li class="list-group-item">&nbsp;</li>
                <li class="list-group-item item-vip-footer" style="">
                    <strong style="color:#DBDBDB;font-size:28px;display:block;">免费</strong>
                    <br>

                  <!--  <a type="button" class="btn btn-all btn-smaller" href="#sign-modal" data-toggle="modal" data-sign="signup">注册</a>-->
                    <span th:if="${session.user==null}">
		           <a class="h_log" href="#" onclick="button1()" id="login1">登录/注册</a>
	            </span>
                </li>
            </ul>
        </div>
        <div class="vip-item">
            <ul class="list-group">
                <li class="list-group-item"><h4 class="is-vip-user">会员 <img src="/static/picture/icon-vip.jpg" alt=""></h4></li>
                <li class="list-group-item"><img src="/static/picture/vip-service-status.jpg" alt=""></li>
                <li class="list-group-item"><img src="/static/picture/vip-service-status.jpg" alt=""></li>
                <li class="list-group-item"><img src="/static/picture/vip-service-status.jpg" alt=""></li>
                <li class="list-group-item rebate-number"><span class="number-eight"><span style="color: #FC9F0E;font-size: 23px">8</span> 折</span></li>
                <li class="list-group-item"><img src="/static/picture/vip-service-status.jpg" alt=""></li>
                <li class="list-group-item item-vip-footer" style="height:195px">
                    <strong class="vip-price" style="font-size: 15px;display:block;margin-bottom: -10px"><span th:text="${memberList.get(0).memberMoney}"   style="font-size:40px;color:#FC9F0E"></span> / 年</strong>
                    <del style="font-size: 12px;color: #999;">原价 699元</del>
                    <br>
                    <a type="button" class="btn btn-bigger btn-all" onclick="payVip()" data-toggle="modal" data-sign="signin" data-next="/vip">加入</a>
                </li>
            </ul>
        </div>
        <div class="vip-item">
            <ul class="list-group">
                <li class="list-group-item"><h4 class="is-free-user">免费</h4></li>
                <li class="list-group-item"><img src="/static/picture/vip-service-status.jpg" alt=""></li>
                <li class="list-group-item"><img src="/static/picture/vip-service-status.jpg" alt=""></li>
                <li class="list-group-item">&nbsp;</li>
                <li class="list-group-item">&nbsp;</li>
                <li class="list-group-item">&nbsp;</li>
                <li class="list-group-item item-vip-footer" style="">
                    <strong style="color:#DBDBDB;font-size:28px;display:block;">免费</strong>
                    <br>

                    <!--  <a type="button" class="btn btn-all btn-smaller" href="#sign-modal" data-toggle="modal" data-sign="signup">注册</a>-->
                    <span th:if="${session.user==null}">
		           <a class="h_log" href="#" onclick="button1()" id="login1">登录/注册</a>
	            </span>
                </li>
            </ul>
        </div>
    </div>
    </div>
<div class="vip-hots">
    <div class="container">
        <div class="vip-hots-header">
            <h4>已有 <span>350,000</span> 人在南瓜课堂购买了 <span>6,000,000+</span> 门课程</h4>
        </div>
        <div class="row vip-hots-body">
            <div class="col-md-4">
                <div class="media">
                    <div class="media-left">
                        <img class="media-object" src="/static/picture/vip-allcourses.jpg">
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">课程畅学</h4>
                        <p>会员专属精品课程，每天不断更新，给你最快的成长</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="media">
                    <div class="media-left">
                        <img class="media-object" src="/static/picture/vip-24.jpg">
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">直播畅看</h4>
                        <p>随时看直播，24小时随时继续</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="media">
                    <div class="media-left">
                        <img class="media-object" src="/static/picture/vip-internet.jpg">
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">优质体验</h4>
                        <p>环境联网，会员客户端+SSH直连+WebIDE，更优实验体验</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="vip-faq">
    <div class="container">
        <div class="vip-faq-header">
            <img src="/static/picture/vip-faq.jpg">
            FAQ
            <span></span>
        </div>
        <div class="vip-faq-body">
            <h4>会员课程和免费课程有什么区别？</h4>
            <div>1. 会员课程多为项目课，免费课程多为基础课。</div>
            <div>2. 会员课程主要由南瓜课堂团队制作及维护，免费课程由南瓜课堂及合作伙伴共同维护。</div>
            <div>3. 会员可联网并保存环境，会员课程内容不受网络及时间限制。</div>
            <div>4. 会员课程更新频率更高，难度会更大。</div>
        </div>

        <div class="vip-faq-body">
            <h4>成功购买会员服务后，是否可以退款？</h4>
            <div>支付购买成功后，暂不接受退款申请，请详细查看会员服务内容后进行购买，如有任何不清楚的地方欢迎在 <a href="javascript:;">讨论区</a> 发帖询问。</div>
        </div>
        <div class="vip-faq-body">
            <h4>高级会员与普通用户有什么不同？</h4>
            <div>1.南瓜课堂提供专职助教，在讨论区为高级会员提供答疑服务，回答学习会员课程过程中遇到的问题。</div>
            <div>2. 购买课程享受8折优惠。</div>
        </div>
        <div class="vip-faq-footer">
            <a href="javascript:;">更多疑问，查看这里></a>
        </div>
    </div>
</div>


<script th:inline="javascript">
      var user=[[${session.user}]];
      var userVipdue=[[${user.userVipdue}]];
      var memberId=[[${memberList.get(0).memberId}]];
      var memberMonth=[[${memberList.get(0).memberMonth}]];
      var memberMoney=[[${memberList.get(0).memberMoney}]];

   //购买Vip会员
    function payVip() {
        if ([[${session.user}]] == null) {
            button1()
        }

        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: '/member/panduan',
            data: {
                user: user,
                userVipdue:[[${user.userVipdue}]],
            },
            success: function (denglu) {
                if (denglu.denglu == 1) {
                    layer.confirm("点击确认购买？",
                        {icon: 4, title: '温馨提示', shade: 0.05, offset: "35%"},
                        //第一个选项对应内容
                        function (index) {
                            flag = true;
                            //调用订单页面，支付跳转
                            payWindow(flag);
                            layer.close(index);
                        },
                        //第二个选项对应内容
                        function () {
                            flag = false;
                        }
                    )
                }
            }
        })


        //弹出框，弹出订单详情页
        function payWindow(obj) {
            if (obj == true) {
                layer.open({
                    type: 2,
                    title: '订单详情',
                    fix: false,
                    maxmin: true,
                    shade: 0.05,//调节背景明暗度
                    offset: "35%",//调节上下浮动位置
                    area: ['400px', '300px'],
                    content: "/member/createOrder?memberId=" + memberId + "&memberMoney=" + memberMoney + "&memberMonth=" + memberMonth,
                    btn: ['确定支付', '我再想想'],
                    yes: function (index, layero) {
                        //gs,获取layer所在页面的元素的属性值
                        var orderId = $(layero).find('iframe')[0].contentWindow.orderId.value;
                        location.href = "/member/goPay?orderId=" + orderId;//gs，跳转至支付页面
                    }
                })
            }
        }
    }

</script>


</body>
</html>